<template>
  <div class="details-wrap">
    <van-nav-bar
      title="活动详情"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.go(-1)"
    />
    <div class="bg"></div>
    <div class="card op9">
      <div class="info m-b-l">
        <p class="op8 p-b-xs">报名时间</p>
        <p class="fs-l">
          <span>2019-10-22 00:00</span> -- <span>2019-10-22 00:00</span>
        </p>
      </div>
      <div class="info m-b-l">
        <p class="op8 p-b-xs">活动时间</p>
        <p class="fs-l">
          <span>2019-10-22 00:00</span> -- <span>2019-10-22 00:00</span>
        </p>
      </div>
      <div class="info">
        <p class="op8 p-b-xs">活动参与</p>
        <p class="fs-l">
          <span>125人已报名</span>
        </p>
      </div>
    </div>

    <div class="details">
      <span class="m-l-l m-r-l">活动详情</span>
    </div>
    <div class="fixed footer-tool">
      <van-button type="info" block @click="toolShow = true"
        >立即报名</van-button
      >
    </div>
    <van-popup
      v-model="toolShow"
      closeable
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-cell-group title="填写信息">
        <van-field
          label="姓名"
          v-model="form.name"
          placeholder="请输入联系姓名"
        />
        <van-field
          label="联系电话"
          v-model="form.mobile"
          placeholder="联系电话"
        />
        <van-field autosize label="性别">
          <div slot="input">
            <van-radio-group v-model="form.sex" label-position="left">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </div>
        </van-field>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "Details",
  data() {
    return {
      toolShow: false,
      form: {
        sex: "1"
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.details-wrap {
  .bg {
    height: 34.6154 * $size;
    background-image: url(http://ymshosss.oss-cn-shanghai.aliyuncs.com/UqP2DphpVn5Yry1571718937191022.jpg);
  }
  .card {
    margin: 0 2.3077 * $size;
    padding: 0.7692 * $size;
    border-radius: 5px;
    transform: translateY(-50%);
    box-shadow: 0 5px 5px 5px rgba(170, 170, 170, 0.4);
  }
  .details {
    margin-top: -1.5385 * $size;
  }
  .footer-tool {
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
